<template>
    <div class="app-container">
        <div class="main-container-content">
            <el-row :gutter="10">
                <div class="contentBoxs_form">
                    <el-col :xs='24' :sm="24" :md="24" :lg="24" :xl="24">
                        <div class="formBox" v-loading="imageLoading">
                            <div class="progressBox" v-if="imageLoading">
                                <div class="lineTitle">共有 {{ uploadNum }} 张照片正在上传,请稍等...</div>
                                <div class="lineBox" v-for="(item, index) in uploadFileLists" :key="index">
                                    <div class="indexBox">{{ index + 1 }}</div>
                                    <el-progress :percentage="item.progress"></el-progress>
                                </div>
                            </div>
                            <div>
                                <el-row :gutter="10">
                                    <el-col :xs='24' :sm="24" :md="14" :lg="15" :xl="15">
                                        <el-form class="formBox1" ref="queryForm" size="small" :inline="true"
                                            label-width="68px">
                                            <div class="contentDailog_contents_div">
                                                <el-form-item label="诊断" prop="diseaseId" v-if="isPosition != 1">
                                                    <el-select v-model="diseaseId" filterable placeholder="诊断" clearable
                                                        style="width:120px">
                                                        <el-option v-for="dict in sysManageDiseases"
                                                            :key="dict.diseaseClassifyId" :label="dict.diseaseClassifyName"
                                                            :value="dict.diseaseClassifyId" />
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="采集设备" prop="photoDevice">
                                                    <el-select v-model="photoDevice" filterable placeholder="采集设备"
                                                        style="width:120px" @change="radioChange">
                                                        <el-option v-for="dict in dict.type.photo_upload_type"
                                                            :key="dict.value" :label="dict.label" :value="dict.value" />
                                                    </el-select>
                                                </el-form-item>

                                                <el-form-item label="" label-width="0px" class="noLabelItem"
                                                    v-if="photoDevice == '0'">
                                                    <el-button type="primary" icon="el-icon-setting" style="margin-left:5px"
                                                        @click="openFeituSetting">霏图设置</el-button>
                                                </el-form-item>
                                                <el-form-item label="" label-width="0px" class="noLabelItem"
                                                    v-if="photoDevice == '0'">
                                                    <el-button type="primary" icon="el-icon-download"
                                                        style="margin-left: 5px" @click="checkFeituBrowser">选择照片</el-button>
                                                </el-form-item>
                                                <el-form-item label="" label-width="0px" class="noLabelItem"
                                                    v-if="photoDevice == '1'">
                                                    <el-button type="primary" icon="el-icon-setting" style="margin-left:5px"
                                                        @click="openPhotoSetting">VISIA设置</el-button>
                                                </el-form-item>
                                                <el-form-item label="" label-width="0px" class="noLabelItem"
                                                    v-if="photoDevice == '1'">
                                                    <el-button type="primary" icon="el-icon-download"
                                                        style="margin-left:5px" @click="checkBrowser">选择照片</el-button>
                                                </el-form-item>


                                                <el-form-item label="" label-width="0px" class="noLabelItem"
                                                    v-if="photoDevice == '2'">

                                                    <el-button type="primary" icon="el-icon-setting"
                                                        style="margin-left: 5px"
                                                        @click="openCameraSetting">照相机设置</el-button>
                                                </el-form-item>
                                                <el-form-item label="" label-width="0px" class="noLabelItem"
                                                    v-if="photoDevice == '2'">
                                                    <el-button type="primary" icon="el-icon-download"
                                                        style="margin-left: 5px"
                                                        @click="checkCameraBrowser">选择照片</el-button>
                                                </el-form-item>
                                                <el-form-item label="" label-width="0px" class="noLabelItem"
                                                    style="margin-left:5px" v-if="photoDevice == '2'">
                                                    <el-button type="primary" icon="el-icon-download"
                                                        @click="goNewPage">自动获取照片</el-button>

                                                </el-form-item>
                                            </div>
                                        </el-form>
                                    </el-col>
                                    <!-- && patientItem.photoNum -->
                                    <el-col :xs='24' :sm="24" :md="10" :lg="9" :xl="9">
                                        <el-form class="formBox2" size="small" :inline="true" label-width="68px">
                                            <div class="contentDailog_contents_div">
                                                <el-form-item label="照片编号:" prop="photoNum"
                                                    v-if="photoDevice == '2' && patientItem.photoNum">
                                                    {{ patientItem.photoNum }}
                                                </el-form-item>
                                                <el-form-item label="录入日期" prop="photoUploadTime">
                                                    <el-date-picker v-model="photoUploadTime" align="left"
                                                        class="idNumInput" type="datetime" placeholder="选择日期"
                                                        value-format="yyyy-MM-dd HH:mm:ss"
                                                        :picker-options="photoPickerOptions">
                                                    </el-date-picker>
                                                </el-form-item>


                                                <el-form-item label="" label-width="0px" class="noLabelItem"
                                                    style="margin-left:5px">
                                                    <el-button v-if="photoDevice == '0'" type="primary"
                                                        @click="submitUpload(0)">提 交</el-button>
                                                    <el-button v-if="photoDevice == '1'" type="primary"
                                                        @click="submitUpload(1)">提 交</el-button>
                                                    <el-button v-if="photoDevice == '2'" type="primary"
                                                        @click="submitUpload(2)">提 交</el-button>

                                                </el-form-item>
                                            </div>
                                        </el-form>
                                    </el-col>
                                </el-row>



                            </div>

                            <el-row class="photoImageContent" v-if="photoDevice == '0'">
                                <el-col :xs='8' :sm="8" :md="8" :lg="8" :xl="8" v-for="(item, index) in feituImageInfo"
                                    :key="index">
                                    <div class="text-center">
                                        <div class="user-info-head">
                                            <el-image class="img-style" :src="item.faceUrl"
                                                :preview-src-list="feituSrcList"></el-image>

                                            <div class="rightNum">{{ index + 1 }}</div>
                                            <div class="rightIcon" @click="deleteFeituImg(index)">X</div>
                                            <div class="leftEnlarge" @click="replaceFeituImg(index)"><i
                                                    class="el-icon-upload"></i></div>

                                        </div>
                                        <el-form class="photoImageContent_formBox" :model="item" ref="pictureForm"
                                            size="small" :label-width="device !== 'mobile' ? '78px' : '0px'">
                                            <el-form-item :label="device !== 'mobile' ? '光照类型' : ''"
                                                :class="device == 'mobile' ? 'noLabelItem' : ''">
                                                <el-select v-model="item.faceLight" disabled filterable placeholder="光照类型"
                                                    clearable class="photoImageContent_input">
                                                    <el-option v-for="dict in dict.type.photo_lighting_type"
                                                        :key="dict.value" :label="dict.label"
                                                        :value="dict.value"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item :label="device !== 'mobile' ? '部位' : ''"
                                                :class="device == 'mobile' ? 'noLabelItem' : ''">
                                                <el-select v-model="item.facePart" filterable placeholder="部位" clearable
                                                    class="photoImageContent_input">
                                                    <el-option v-for="dict in dict.type.sys_face_part" :key="dict.value"
                                                        :label="dict.label" :value="dict.value"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </el-col>
                            </el-row>

                            <el-row class="photoImageContent" :gutter="10" v-if="photoDevice == '1'">
                                <el-col :xs="8" :sm="6" :md="6" :lg="{ span: '4-8' }" :xl="{ span: '4-8' }"
                                    v-for="(item, index) in VisiaImageInfo" :key="index">
                                    <div class="text-center">
                                        <div class="user-info-head">
                                           <el-image class="img-style" :src="item.faceUrl" v-if="item.faceUrl"
                                                :preview-src-list="feituSrcList"></el-image>
                                           <div class="img-style" v-else>

                                            <div class="slotlazyImg-txt" v-if="item.isLoading">图片加载中...</div>
                                           </div>

                                            <div class="rightNum">{{ index + 1 }}</div>
                                            <div class="rightIcon" @click="deleteImg(index)">X</div>
                                            <div class="leftEnlarge" @click="replaceImg(index)"><i
                                                    class="el-icon-upload"></i>
                                            </div>

                                        </div>
                                        <el-form class="photoImageContent_formBox" :model="item" ref="pictureForm"
                                            size="small" :label-width="device !== 'mobile' ? '78px' : '0px'">
                                            <el-form-item :label="device !== 'mobile' ? '光照类型' : ''"
                                                :class="device == 'mobile' ? 'noLabelItem' : ''">
                                                <el-select v-model="item.faceLight" filterable placeholder="光照类型" clearable
                                                    class="photoImageContent_input">
                                                    <el-option v-for="dict in dict.type.photo_lighting_type"
                                                        :key="dict.value" :label="dict.label"
                                                        :value="dict.value"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item :label="device !== 'mobile' ? '部位' : ''"
                                                :class="device == 'mobile' ? 'noLabelItem' : ''">
                                                <el-select v-model="item.facePart" filterable placeholder="部位" clearable
                                                    class="photoImageContent_input">
                                                    <el-option v-for="dict in dict.type.sys_face_part" :key="dict.value"
                                                        :label="dict.label" :value="dict.value"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </el-col>
                            </el-row>

                            <el-row class="photoImageContent" :gutter="10" v-if="photoDevice == '2'">
                                <el-col :xs="8" :sm="6" :md="6" :lg="{ span: '4-8' }" :xl="{ span: '4-8' }"
                                    v-for="(item, index) in cameraImageInfo" :key="index">
                                    <div class="text-center">
                                        <div class="user-info-head">
                                            <el-image class="img-styleCamera" fit="contain" :src="item.faceUrl" v-if="item.faceUrl"
                                                :preview-src-list="cameraSrcList"></el-image>
                                                <div class="img-style" v-else>

                                           <div class="slotlazyImg-txt" v-if="item.isLoading">图片加载中...</div>
                                          </div>
                                            <div class="rightNum">{{ index + 1 }}</div>
                                            <div class="rightIcon" @click="deleteCameraImg(index)">X</div>
                                            <div class="leftEnlarge" @click="replaceCameraImg(index)"><i
                                                    class="el-icon-upload"></i></div>

                                        </div>
                                        <el-form class="photoImageContent_formBox" :model="item" ref="pictureForm"
                                            size="small" :label-width="device !== 'mobile' ? '78px' : '0px'">
                                            <el-form-item :label="device !== 'mobile' ? '光照类型' : ''"
                                                :class="device == 'mobile' ? 'noLabelItem' : ''">
                                                <el-select v-model="item.faceLight" disabled filterable placeholder="光照类型"
                                                    clearable class="photoImageContent_input">
                                                    <el-option v-for="dict in dict.type.photo_lighting_type"
                                                        :key="dict.value" :label="dict.label"
                                                        :value="dict.value"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item :label="device !== 'mobile' ? '部位' : ''"
                                                :class="device == 'mobile' ? 'noLabelItem' : ''">
                                                <el-select v-model="item.facePart" filterable placeholder="部位" clearable
                                                    class="photoImageContent_input">
                                                    <el-option v-for="dict in dict.type.sys_face_part" :key="dict.value"
                                                        :label="dict.label" :value="dict.value"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </div>
            </el-row>

        </div>
        <el-dialog title="霏图设备设置" :visible.sync="feituSettingVisible" width="460px " append-to-body center
            :close-on-click-modal="false" v-dialogDrag>
            <el-form :model="feituSettingFormCopy" label-width="100px">
                <el-form-item label="设备类型">
                    <el-input :disabled="true" v-model="feituSettingFormCopy.settingType" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="照片压缩质量">
                    <el-input-number :min="0.1" :max="1" :precision="2" :step="0.01"
                        v-model="feituSettingFormCopy.photoQuality" style="width: 250px"></el-input-number>
                </el-form-item>
                <el-form-item v-for="(item, index) in feituSettingFormCopy.photoSetting" :key="index">
                    <span slot="label">
                        第{{ index + 1 }}张
                    </span>
                    <el-select v-model="item.faceLight" filterable placeholder="光照类型" style="width: 120px"
                        :clearable="true">
                        <el-option v-for="dict in dict.type.photo_lighting_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                    <el-select v-model="item.facePart" filterable placeholder="部位" style="width: 120px;margin-left: 10px"
                        :clearable="true">
                        <el-option v-for="dict in dict.type.sys_face_part" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="confirmFeituSetting">确 定</el-button>
                <el-button @click="cancelFeituSetting">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="VISIA设备设置" :visible.sync="photoSettingVisible" width="460px " append-to-body center
            :close-on-click-modal="false" v-dialogDrag>
            <el-form :model="photoSettingFormCopy" label-width="100px">
                <el-form-item label="设备类型">
                    <el-input :disabled="true" v-model="photoSettingFormCopy.settingType" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="照片压缩质量">
                    <el-input-number :min="0.1" :max="1" :precision="2" :step="0.01"
                        v-model="photoSettingFormCopy.photoQuality" style="width: 250px"></el-input-number>
                </el-form-item>
                <el-form-item label="照片张数">
                    <el-input-number :min="1" v-model="photoSettingFormCopy.photoNumber" @change="photoNumberChange"
                        style="width: 250px"></el-input-number>
                </el-form-item>
                <el-form-item v-for="(item, index) in photoSettingFormCopy.photoSetting" :key="index">
                    <span slot="label">
                        第{{ index + 1 }}张
                    </span>
                    <el-select v-model="item.faceLight" filterable placeholder="光照类型" style="width: 120px"
                        :clearable="true">
                        <el-option v-for="dict in dict.type.photo_lighting_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                    <el-select v-model="item.facePart" filterable placeholder="部位" style="width: 120px;margin-left: 10px"
                        :clearable="true">
                        <el-option v-for="dict in dict.type.sys_face_part" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="confirmSetting">确 定</el-button>
                <el-button @click="cancelSetting">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="照相机设备设置" :visible.sync="cameraSettingVisible" width="460px " append-to-body center
            :close-on-click-modal="false" v-dialogDrag>
            <el-form :model="cameraSettingFormCopy" label-width="100px">
                <el-form-item label="设备类型">
                    <el-input :disabled="true" v-model="cameraSettingFormCopy.settingType" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="照片压缩质量">
                    <el-input-number :min="0.1" :max="1" :precision="2" :step="0.01"
                        v-model="cameraSettingFormCopy.photoQuality" style="width: 250px"></el-input-number>
                </el-form-item>
                <el-form-item label="照片张数">
                    <el-input-number :min="1" v-model="cameraSettingFormCopy.photoNumber" @change="cameraNumberChange"
                        style="width: 250px"></el-input-number>
                </el-form-item>
                <el-form-item v-for="(item, index) in cameraSettingFormCopy.photoSetting" :key="index">
                    <span slot="label">
                        第{{ index + 1 }}张
                    </span>
                    <el-select v-model="item.faceLight" filterable placeholder="光照类型" style="width: 120px"
                        :clearable="true">
                        <el-option v-for="dict in dict.type.photo_lighting_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                    <el-select v-model="item.facePart" filterable placeholder="部位" style="width: 120px;margin-left: 10px"
                        :clearable="true">
                        <el-option v-for="dict in dict.type.sys_face_part" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="confirmCameraSetting">确 定</el-button>
                <el-button @click="cancelCameraSetting">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getVisit } from "@/api/patientRegistration/registrationList";
import {
    listClassify
} from "@/api/system/classify";
// 导入的方法将使用文件系统
// 访问API或回退实现。
import {
    fileOpen,
    directoryOpen,
    fileSave,
    supported,
} from 'browser-fs-access';
import { uploadPhoto, getPhotoAllCountByPatientId, getPhotoAllCountByVisitNum } from "@/api/photoWorkstation/photoList";
import imgzip from "imgzip";
import store from "@/store";
import { nanoid } from "nanoid";
export default {
    name: "PhotoList",
    components: {},
    dicts: [
        "sys_diagnosis_status",
        "sys_user_sex",
        "photo_upload_type",
        "photo_lighting_type",
        "sys_face_part",
        "sys_patient_properties",
        "sys_patient_sort",
        "sys_diagnosis_status"
    ],
    props: ["isMorePic", 'patientItem', 'isPosition'],
    data() {
        return {
            token: this.$store.state.user.token,
            electronUrl: '',
            // 遮罩层
            loading: false,
            imageLoading: false,
            sysManageDiseases: [],//专病管理
            // 总条数
            total: 0,
            // 显示搜索条件
            showSearch: true,
            // 顾客选择弹窗
            patientVisible: false,
            // 登记顾客列表
            // patientItem: {
            //     birthDate: undefined,
            //     customerSort: undefined,
            //     diagnosis: undefined,
            //     deptName: undefined,
            //     patientId: undefined,
            //     patientName: undefined,
            //     patientPhone: undefined,
            //     properties: undefined,
            //     sex: undefined,
            //     status: undefined,

            // },
            patientList: [],
            pageSizes: [5, 10, 15, 20],

            // 拍摄照片表单
            pictureForm: {
                photoLightingType: "0",
                photoFacePart: '',
                photoUploadType: "霏图",
                leftPhotoAddress: null,
                middlePhotoAddress: null,
                rightPhotoAddress: null,
            },
            leftPaceForm: { avatar: "" },
            leftType: "left",
            centerType: "center",
            rightType: "right",
            uploadPicShow: true,
            centerPaceForm: { avatar: "" },
            rightPaceForm: { avatar: "" },
            // 默认拍照设备
            photoDevice: '0',
            diseaseId: '',
            // 补光灯是否开启
            fillLightDefault: false,
            // 霏图光照类型
            feituLightingType: {
                leftFace: '',
                middleFace: '',
                rightFace: '',
            },
            // 霏图光照和脸部设置
            feituSettingVisible: false,
            feituSettingForm: {
                settingType: '霏图',
                photoQuality: 0.5,
                photoSetting: [
                    {
                        faceLight: '1',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '1',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '1',
                        facePart: '',
                        faceUrl: '',
                    },
                ]
            },
            feituSettingFormCopy: {},
            feituImageInfo: [
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
            ],
            feituBlobsInDirectory: [],
            photoSettingVisible: false,
            photoSettingForm: {
                settingType: 'VISIA',
                photoQuality: 0.5,
                photoNumber: 15,
                photoSetting: [
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '',
                        facePart: '',
                        faceUrl: '',
                    },
                ]
            },
            photoSettingFormCopy: {},
            VisiaImageInfo: [    // Visia照片信息
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
            ],
            blobsInDirectory: [],
            cameraSettingVisible: false,
            cameraSettingForm: {
                settingType: '照相机',
                photoQuality: 0.5,
                photoNumber: 5,
                photoSetting: [
                    {
                        faceLight: '1',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '1',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '1',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '1',
                        facePart: '',
                        faceUrl: '',
                    },
                    {
                        faceLight: '1',
                        facePart: '',
                        faceUrl: '',
                    },

                ]
            },
            cameraSettingFormCopy: {},
            cameraImageInfo: [    // camera照片信息
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },
                {
                    faceLight: '',
                    facePart: '',
                    faceUrl: '',
                },

            ],
            cameraBlobsInDirectory: [],


            uploadPatientId: '',
            morePicsDialogVisible: false,
            photoCount: null,
            timer: null,
            photoPickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }
                ]
            },
            photoUploadTime: new Date(),
            uploadNum: 0,
        }
    },
    computed: {
        ...mapGetters(["avatar", "device", "nickName"]),
        uploadFileLists() {
            return store.getters.uploadFileLists
        },
        MuserInfo() {
            return this.$store.state.app.photoUserInfo
        },
        srcList() {
            return this.VisiaImageInfo.map(n => n.faceUrl) || []
        },
        feituSrcList() {
            return this.feituImageInfo.map(n => n.faceUrl) || []
        },
        cameraSrcList() {
            return this.cameraImageInfo.map(n => n.faceUrl) || []
        },
    },

    watch: {
        $route: {
            handler(newVal, oldValue) {
                console.log('$route', newVal)

            },
            deep: true, // 深度监听
            immediate: true,//立即执行
        }
    },
    mounted() {
       // console.log(this.device)
        if (this.isPosition == '1') {
            this.uploadPatientId = this.patientItem.patientId
        }
        this.getclassList()

    },
    methods: {
        // 获取专病列表
        getclassList() {
            this.loading = true;
            let params = {
                pageNum: 1,
                pageSize: 9999,
                status: '0',
            }
            listClassify(
                params
            ).then((response) => {
                this.loading = false;
                this.sysManageDiseases = response.rows;
            });
        },

        goMorePicture() {
            this.timer = new Date().getTime();
            this.morePicsDialogVisible = true
            // this.$router.push("/photoWorkstation/photoWorkstation-detail/index/" + patientId);
        },
        radioChange(value) {
          //  console.log('radioChange', value)
            localStorage.setItem('photoDevice', value);
        },
        // 转换默认拍摄设备
        turnFillLightDefault(value) {
           // console.log(value)
            localStorage.setItem('fillLightDefault', value);  //进行本地存储
        },
        uploadFile() {
            this.$refs.fileRef.dispatchEvent(new MouseEvent('click'))
        },
        // fileChange() {
        //   // 上传文件
        // },



        // 0 霏图  1 visa  2 照相机 提交照片
        async submitUpload(type) {
            if (this.photoUploadTime == null) {
                this.$message.warning('请选择录入日期')
                return
            }
            if (this.uploadPatientId) {
                let faceLightIndex = ''
                if (type == 0) {
                    faceLightIndex = this.feituImageInfo.findIndex(item => {
                        return item.faceLight == ''
                    })
                  //  console.log('this.feituImageInfo', this.feituImageInfo)
                } else if (type == 1) {
                    faceLightIndex = this.VisiaImageInfo.findIndex(item => {
                        return item.faceLight == ''
                    })
                   // console.log('this.VisiaImageInfo', this.VisiaImageInfo)
                } else if (type == 2) {
                    faceLightIndex = this.cameraImageInfo.findIndex(item => {
                        return item.faceLight == ''
                    })
                  //  console.log('this.cameraImageInfo', this.cameraImageInfo)
                }


                //console.log('faceLightIndex====', faceLightIndex)
                if (faceLightIndex != -1) {
                    this.$confirm(`第<strong>(${faceLightIndex + 1})</strong>张照片的<strong>(光照类型)</strong>未选择！请您选择`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        dangerouslyUseHTMLString: true,
                    })
                        .then((content) => {
                           // console.log(content)

                        })
                        .catch((error) => {
                          //  console.log(error)
                        })
                   // console.log("faceLightIndex----return")
                    return

                }
                let facePartIndex = ''
                if (type == 0) {
                    facePartIndex = this.feituImageInfo.findIndex(item => {
                        return item.facePart == ''
                    })
                } else if (type == 1) {
                    facePartIndex = this.VisiaImageInfo.findIndex(item => {
                        return item.facePart == ''
                    })
                } else if (type == 2) {
                    facePartIndex = this.cameraImageInfo.findIndex(item => {
                        return item.facePart == ''
                    })
                }
              //  console.log('facePartIndex====', facePartIndex)
                if (facePartIndex != -1) {
                    this.$confirm(`第<strong>( ${facePartIndex + 1} )</strong>张照片的<strong>( 部位 )</strong>未选择！请您选择`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        dangerouslyUseHTMLString: true,
                    })
                        .then((content) => {
                            // console.log(content)
                        })
                        .catch((error) => {
                            // console.log(error)
                        })
                    return
                }

                let faceUrlIndex = ''
                if (type == 0) {
                    faceUrlIndex = this.feituImageInfo.findIndex(item => {
                        return item.faceUrl == ''
                    })
                } else if (type == 1) {
                    faceUrlIndex = this.VisiaImageInfo.findIndex(item => {
                        return item.faceUrl == ''
                    })
                } else if (type == 2) {
                    faceUrlIndex = this.cameraImageInfo.findIndex(item => {
                        return item.faceUrl == ''
                    })
                }
               // console.log('faceUrlIndex====', faceUrlIndex)
                if (faceUrlIndex != -1) {
                    this.$confirm(`第<strong>( ${faceUrlIndex + 1} )</strong>张照片未选择！请您选择`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        dangerouslyUseHTMLString: true,
                    })
                        .then((content) => {
                            // console.log(content)
                        })
                        .catch((error) => {
                            // console.log(error)
                        })
                    return
                }

                //判断部位
                let photoItem1 = []
                let photoItem2 = []
                let photoItem3 = []
                if (type == 0) {
                    this.feituImageInfo.forEach(it => {
                        if (it.faceLight == '1' && it.facePart == '0') {
                            photoItem1.push(it)
                        }
                        if (it.faceLight == '1' && it.facePart == '1') {
                            photoItem2.push(it)
                        }
                        if (it.faceLight == '1' && it.facePart == '2') {
                            photoItem3.push(it)
                        }
                    })

                    if (photoItem1.length == 1 && photoItem2.length == 1 && photoItem3.length == 1) {
                        this.confirmUpload(type)
                    } else {
                        this.$confirm(`是否修改?使该组照片光照类型为<strong>Standard</strong>,且部位为<strong>左面部, 正面部, 右面部</strong>有且有三张。否则无法进行AI分析!`, '提示', {
                            confirmButtonText: '继续上传',
                            cancelButtonText: '返回修改',
                            type: 'warning',
                            dangerouslyUseHTMLString: true,
                        }).then((content) => {
                            // console.log(content)
                            this.confirmUpload(type)
                        }).catch((error) => {
                            // console.log(error)
                        });
                        return
                    }

                } else if (type == 1) {
                    this.VisiaImageInfo.forEach(it => {
                        if (it.faceLight == '1' && it.facePart == '0') {
                            photoItem1.push(it)
                        }
                        if (it.faceLight == '1' && it.facePart == '1') {
                            photoItem2.push(it)
                        }
                        if (it.faceLight == '1' && it.facePart == '2') {
                            photoItem3.push(it)
                        }
                    })
                    if (photoItem1.length > 1 || photoItem2.length > 1 || photoItem3.length > 1) {
                        this.$confirm(`是否修改?使该组照片光照类型为<strong>Standard</strong>,且部位为<strong>左面部, 正面部, 右面部</strong>有且有三张。否则无法进行AI分析!`, '提示', {
                            confirmButtonText: '继续上传',
                            cancelButtonText: '返回修改',
                            type: 'warning',
                            dangerouslyUseHTMLString: true,
                        }).then((content) => {
                            // console.log(content)
                            this.confirmUpload(type)
                        }).catch((error) => {
                            // console.log(error)
                        });
                        return
                    } else {
                        this.confirmUpload(type)
                    }
                } else if (type == 2) {
                    this.cameraImageInfo.forEach(it => {
                        if (it.faceLight == '1' && it.facePart == '0') {
                            photoItem1.push(it)
                        }
                        if (it.faceLight == '1' && it.facePart == '1') {
                            photoItem2.push(it)
                        }
                        if (it.faceLight == '1' && it.facePart == '2') {
                            photoItem3.push(it)
                        }
                    })
                    if (photoItem1.length > 1 || photoItem2.length > 1 || photoItem3.length > 1) {
                        this.$confirm(`是否修改?使该组照片光照类型为<strong>Standard</strong>,且部位为<strong>左面部, 正面部, 右面部</strong>有且有三张。否则无法进行AI分析!`, '提示', {
                            confirmButtonText: '继续上传',
                            cancelButtonText: '返回修改',
                            type: 'warning',
                            dangerouslyUseHTMLString: true,
                        }).then((content) => {
                            // console.log(content)
                            this.confirmUpload(type)
                        }).catch((error) => {
                            // console.log(error)
                        });
                        return
                    } else {
                        this.confirmUpload(type)
                    }
                }



            } else {
                this.$modal.msgWarning("参数错误");
                // this.$confirm('请搜索选择顾客！', '提示', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     type: 'warning'
                // })
                //     .then((content) => {
                //         console.log(content)
                //     })
                //     .catch((error) => {
                //         console.log(error)
                //     })
            }

        },
        async confirmUpload(type) {
            this.imageLoading = true
            let uuid = nanoid()
            // 创建FormData对象，通过该对象实现批量文件上传
            // let fd = new FormData()
            // // 因为要上传多个文件，所以需要遍历一下才行,不要直接使用我们的文件数组进行上传，你会发现传给后台的是两个Object
            // if (type == 0) {
            //     this.feituBlobsInDirectory.forEach(function (file) {
            //         // 遍历files数组，将file添加到FormData对象中
            //         fd.append("files", file, file.name)
            //         // console.log('fd.append', file, fd.getAll('files'))
            //     })
            // } else if (type == 1) {
            //     this.blobsInDirectory.forEach(function (file) {
            //         // 遍历files数组，将file添加到FormData对象中
            //         fd.append("files", file, file.name)
            //         // console.log('fd.append',file,fd.getAll('files'))
            //     })
            // } else if (type == 2) {
            //     this.cameraBlobsInDirectory.forEach(function (file) {
            //         // 遍历files数组，将file添加到FormData对象中
            //         fd.append("files", file, file.name)
            //         // console.log('fd.append',file,fd.getAll('files'))
            //     })
            // }
            let faceLights = []
            let faceParts = []
            // let Mdata = {}
            if (type == 0) {
                this.feituImageInfo.forEach(item => {
                    faceLights.push(item.faceLight)
                    faceParts.push(item.facePart)
                })

            } else if (type == 1) {
                this.VisiaImageInfo.forEach(item => {
                    faceLights.push(item.faceLight)
                    faceParts.push(item.facePart)
                })

            } else if (type == 2) {
                this.cameraImageInfo.forEach(item => {
                    faceLights.push(item.faceLight)
                    faceParts.push(item.facePart)
                })

            }

            let loop = 0
            this.uploadNum = 0
            let fileUploads = []
            if (type == 0) {
                for (const i in this.feituImageInfo) {

                    let fileId = nanoid()
                    let fd = new FormData()
                    fd.append("files", this.feituBlobsInDirectory[i], this.feituBlobsInDirectory[i].name)

                    const Mdata = {
                        compressionRatio: this.feituSettingForm.photoQuality,
                        type: this.photoDevice,
                        patientId: this.uploadPatientId,
                        visitNum: this.patientItem.visitNum,
                        status: this.patientItem.status,
                        faceLights: faceLights[i],
                        faceParts: faceParts[i],
                        data: fd,
                        photoUploadTime: this.parseTime(this.photoUploadTime),
                        uuid: uuid,
                        num: i,
                    }
                    console.log('Mdata',Mdata)

                    let obj = {
                        fileId: fileId,
                        progress: 0,
                        isUploaded: false
                    }
                    this.$store.dispatch('file/initUploadFile', obj)
                    // uploadPhoto(Mdata, fileId, this).then((response) => {
                    //   if (response.code == 200) {
                    //     let obj = {
                    //       fileId: fileId,
                    //       progress: 100,
                    //       isUploaded: true
                    //     }
                    //     this.$store.dispatch('file/uploadUploadFile', obj)
                    //     loop+=1
                    //     if(loop===this.feituImageInfo.length){
                    //       this.imageLoading = false
                    //       this.$store.dispatch('file/clearUploadFile', [])
                    //       this.$modal.msgSuccess("提交成功");
                    //       this.feituImageInfo.forEach(item => {
                    //         item.faceUrl = ''
                    //       })
                    //       this.feituBlobsInDirectory = []
                    //     }
                    //   }
                    // }).catch((error) => {
                    //   let obj = {
                    //     fileId: fileId,
                    //     progress: 0,
                    //     isUploaded: false
                    //   }
                    //   this.$store.dispatch('file/uploadUploadFile', obj)
                    //   this.$modal.alertError(error);
                    // });
                    this.uploadNum = this.feituImageInfo.length
                    fileUploads.push(uploadPhoto(Mdata, fileId, this))
                    loop += 1
                    let bool = (this.feituImageInfo.length === loop)
                    // console.log('bool-----',bool)
                    if (fileUploads.length === 3 || bool) {
                        const res = await Promise.all(fileUploads)
                        // console.log("promise all:   ", res)

                        res.forEach(col => {
                            if (col.code === 200) {
                                this.$store.dispatch('file/uploadUploadFile', {
                                    fileId: col.fileId,
                                    progress: 100,
                                    isUploaded: true
                                })
                            } else {
                                this.imageLoading = false
                                this.$store.dispatch('file/clearUploadFile', [])
                                this.$modal.alertError(error);
                                // this.getPhotoCount()

                            }
                        })
                        fileUploads = []
                        if (bool) {
                            this.imageLoading = false
                            this.$store.dispatch('file/clearUploadFile', [])
                            this.$modal.msgSuccess("提交成功");
                            this.feituImageInfo.forEach(item => {
                                item.faceUrl = ''
                            })
                            this.feituBlobsInDirectory = []
                            // this.getPhotoCount()
                        }

                    }



                }

            } else if (type == 1) {
                for (const i in this.VisiaImageInfo) {
                    let fileId = nanoid()
                    let fd = new FormData()
                    fd.append("files", this.blobsInDirectory[i], this.blobsInDirectory[i].name)
                    const Mdata = {
                        compressionRatio: this.photoSettingForm.photoQuality,
                        type: this.photoDevice,
                        patientId: this.uploadPatientId,
                        visitNum: this.patientItem.visitNum,
                        status: this.patientItem.status,
                        faceLights: faceLights[i],
                        faceParts: faceParts[i],
                        data: fd,
                        photoUploadTime: this.parseTime(this.photoUploadTime),
                        uuid: uuid,
                        num: i,
                    }

                    let obj = {
                        fileId: fileId,
                        progress: 0,
                        isUploaded: false
                    }
                    this.$store.dispatch('file/initUploadFile', obj)
                    // uploadPhoto(Mdata, fileId, this).then((response) => {
                    //   if (response.code == 200) {
                    //     let obj = {
                    //       fileId: fileId,
                    //       progress: 100,
                    //       isUploaded: true
                    //     }
                    //     this.$store.dispatch('file/uploadUploadFile', obj)
                    //     loop+=1
                    //     if(loop===this.VisiaImageInfo.length){
                    //       this.imageLoading = false
                    //       this.$store.dispatch('file/clearUploadFile', [])
                    //       this.$modal.msgSuccess("提交成功");
                    //       this.VisiaImageInfo.forEach(item => {
                    //         item.faceUrl = ''
                    //       })
                    //       this.blobsInDirectory = []
                    //     }
                    //   }
                    // }).catch((error) => {
                    //   let obj = {
                    //     fileId: fileId,
                    //     progress: 0,
                    //     isUploaded: false
                    //   }
                    //   this.$store.dispatch('file/uploadUploadFile', obj)
                    //   this.$modal.alertError(error);
                    //   // this.imageLoading = false
                    // });
                    this.uploadNum = this.VisiaImageInfo.length
                    fileUploads.push(uploadPhoto(Mdata, fileId, this))
                    loop += 1
                    let bool = (this.VisiaImageInfo.length === loop)
                    // console.log('bool-----',bool)
                    if (fileUploads.length === 3 || bool) {
                        const res = await Promise.all(fileUploads)
                        // console.log("promise all:   ", res)

                        res.forEach(col => {
                            if (col.code === 200) {
                                this.$store.dispatch('file/uploadUploadFile', {
                                    fileId: col.fileId,
                                    progress: 100,
                                    isUploaded: true
                                })
                            } else {
                                this.imageLoading = false
                                this.$store.dispatch('file/clearUploadFile', [])
                                this.$modal.alertError(error);
                                // this.getPhotoCount()

                            }
                        })
                        fileUploads = []
                        if (bool) {
                            this.imageLoading = false
                            this.$store.dispatch('file/clearUploadFile', [])
                            this.$modal.msgSuccess("提交成功");
                            this.VisiaImageInfo.forEach(item => {
                                item.faceUrl = ''
                                item.isLoading=false
                            })
                            this.blobsInDirectory = []
                            // this.getPhotoCount()
                        }
                    }


                }
            } else if (type == 2) {
                for (const i in this.cameraImageInfo) {
                    let fileId = nanoid()
                    let fd = new FormData()
                    fd.append("files", this.cameraBlobsInDirectory[i], this.cameraBlobsInDirectory[i].name)
                    const Mdata = {
                        compressionRatio: this.cameraSettingForm.photoQuality,
                        type: this.photoDevice,
                        patientId: this.uploadPatientId,
                        visitNum: this.patientItem.visitNum,
                        status: this.patientItem.status,
                        faceLights: faceLights[i],
                        faceParts: faceParts[i],
                        data: fd,
                        photoUploadTime: this.parseTime(this.photoUploadTime),
                        uuid: uuid,
                        num: i,
                    }

                    let obj = {
                        fileId: fileId,
                        progress: 0,
                        isUploaded: false
                    }
                    this.$store.dispatch('file/initUploadFile', obj)

                    // uploadPhoto(Mdata, fileId, this).then((response) => {
                    //   if (response.code == 200) {
                    //     let obj = {
                    //       fileId: fileId,
                    //       progress: 100,
                    //       isUploaded: true
                    //     }
                    //     this.$store.dispatch('file/uploadUploadFile', obj)
                    //     loop+=1
                    //     if(loop===this.cameraImageInfo.length){
                    //       this.imageLoading = false
                    //       this.$store.dispatch('file/clearUploadFile', [])
                    //       this.$modal.msgSuccess("提交成功");
                    //       this.cameraImageInfo.forEach(item => {
                    //         item.faceUrl = ''
                    //       })
                    //       this.cameraBlobsInDirectory = []
                    //     }
                    //
                    //   }
                    //
                    //
                    // }).catch((error) => {
                    //   let obj = {
                    //     fileId: fileId,
                    //     progress: 0,
                    //     isUploaded: false
                    //   }
                    //   this.$store.dispatch('file/uploadUploadFile', obj)
                    //   this.$modal.alertError(error);
                    //   // this.imageLoading = false
                    // });
                    this.uploadNum = this.cameraImageInfo.length
                    fileUploads.push(uploadPhoto(Mdata, fileId, this))
                    loop += 1
                    let bool = (this.cameraImageInfo.length === loop)
                    // console.log('bool-----',bool)
                    if (fileUploads.length === 3 || bool) {
                        const res = await Promise.all(fileUploads)
                        // console.log("promise all:   ", res)

                        res.forEach(col => {
                            if (col.code === 200) {
                                this.$store.dispatch('file/uploadUploadFile', {
                                    fileId: col.fileId,
                                    progress: 100,
                                    isUploaded: true
                                })
                            } else {
                                this.imageLoading = false
                                this.$store.dispatch('file/clearUploadFile', [])
                                this.$modal.alertError(error);
                                // this.getPhotoCount()

                            }
                        })
                        fileUploads = []
                        if (bool) {
                            this.imageLoading = false
                            this.$store.dispatch('file/clearUploadFile', [])
                            this.$modal.msgSuccess("提交成功");
                            this.cameraImageInfo.forEach(item => {
                                item.faceUrl = ''
                                item.isLoading=false
                            })
                            this.cameraBlobsInDirectory = []
                            // this.getPhotoCount()
                        }

                    }

                }
            }

            // uploadPhoto(Mdata).then((response) => {
            //     if (response.code == 200) {
            //         console.log(response)
            //         this.$modal.msgSuccess("提交成功");
            //         if (type == 0) {
            //             this.feituImageInfo.forEach(item => {
            //                 item.faceUrl = ''
            //             })
            //             this.feituBlobsInDirectory = []
            //         } else if (type == 1) {
            //             this.VisiaImageInfo.forEach(item => {
            //                 item.faceUrl = ''
            //             })
            //             this.blobsInDirectory = []
            //         } else if (type == 2) {
            //             this.cameraImageInfo.forEach(item => {
            //                 item.faceUrl = ''
            //             })
            //             this.cameraBlobsInDirectory = []
            //         }
            //
            //         this.$emit("closepictureDatile")
            //     } else if (response.code = 500) {
            //         this.$modal.alertError(response.msg);
            //     }
            //     this.imageLoading = false
            //
            // }).catch((error) => {
            //     console.log(error)
            //     this.$modal.alertError(error);
            //     this.imageLoading = false
            // });
        },



        // 霏图光照类型改变
        feituLightingTypeChange(value) {
            var lightTypeNum = ''
            if (value === 'left') {
                lightTypeNum = parseInt(this.feituLightingType.leftFace)
                this.feituLightingType.leftFace = this.dict.type.photo_lighting_type[lightTypeNum].label
            } else if (value === 'middle') {
                lightTypeNum = parseInt(this.feituLightingType.middleFace)
                this.feituLightingType.middleFace = this.dict.type.photo_lighting_type[lightTypeNum].label
            } else if (value === 'right') {
                lightTypeNum = parseInt(this.feituLightingType.rightFace)
                this.feituLightingType.rightFace = this.dict.type.photo_lighting_type[lightTypeNum].label
            }
           // console.log('this.feituLightingType', this.feituLightingType)
            localStorage.setItem('feituLightingType', JSON.stringify(this.feituLightingType));

        },
        feituLightingTypeClear(value) {
            if (value === 'left') {
                this.feituLightingType.leftFace = ''
            } else if (value === 'middle') {
                this.feituLightingType.middleFace = ''
            } else if (value === 'right') {
                this.feituLightingType.rightFace = ''
            }
           // console.log('this.feituLightingType', this.feituLightingType)
            localStorage.setItem('feituLightingType', JSON.stringify(this.feituLightingType));
        },
        // 打开霏图设备设置
        openFeituSetting() {
            this.feituSettingVisible = true
            this.feituSettingFormCopy = JSON.parse(localStorage.getItem('feituSetting')) || JSON.parse(JSON.stringify(this.feituSettingForm));

        },
        //霏图拍照设置确定
        confirmFeituSetting() {
           // console.log('confirmFeituSetting--', this.feituSettingFormCopy)
            if (!this.feituSettingFormCopy.photoQuality) {
                this.$confirm('请输入照片压缩质量!', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then((content) => {
                        return
                    })
                    .catch((error) => {
                        return
                    })
            } else {
                this.feituSettingFormCopy.photoSetting.forEach(item => {
                    item.faceUrl = ''
                })
                localStorage.setItem('feituSetting', JSON.stringify(this.feituSettingFormCopy));
                this.feituSettingForm = JSON.parse(JSON.stringify(this.feituSettingFormCopy))
                this.feituImageInfo = this.feituSettingForm.photoSetting
                this.feituBlobsInDirectory = []
                this.feituSettingVisible = false
            }



        },
        //霏图拍照设置取消
        cancelFeituSetting() {
            this.feituSettingVisible = false
        },
        //获取霏图授权,选择照片
        async checkFeituBrowser() {
            // 打开多个文件。
            this.feituBlobsInDirectory = await fileOpen({
                mimeTypes: ['image/*'],
                extensions: ['.ydu'],
                multiple: true,
            });

            //2.读取文件，成功img标签可以直接使用的格式
            //FileReader类就是专门用来读文件的
            //3.readAsDataURL: dataurl它的本质就是图片的二进制数据， 进行base64加密后形成的一个字符串， 这个字符串可以直接作用img标签的图片资源使用

            this.feituImageInfo.forEach(item => {
                item.faceUrl = ''
            })

            this.feituBlobsInDirectory = this.feituBlobsInDirectory.filter((item, index) => {
                return index < this.feituImageInfo.length
            })

            if (this.photoSettingForm.photoQuality) {

            } else {
                this.photoSettingForm.photoQuality = 0.5
            }
           // console.log('this.photoSettingForm.photoQuality', this.photoSettingForm.photoQuality)
            if (this.photoSettingForm.photoQuality == 1) {
                this.feituBlobsInDirectory.forEach((item, index) => {
                    const reader = new FileReader();
                    reader.readAsDataURL(item)
                    reader.onload = () => {
                        this.feituImageInfo[index].faceUrl = reader.result
                    };
                })
             //   console.log('this.feituImageInfo=====11111', this.feituImageInfo)

            } else {
                let compress = new imgzip({ quality: this.photoSettingForm.photoQuality });
                let cameraBlob = ''
                let cameraFiles = ''
                let cameraBlobList = []
                let _this = this
                this.feituBlobsInDirectory.forEach((item, index) => {
                    compress.photoCompress(item, function (base64) {
                        _this.feituImageInfo[index].faceUrl = base64    //预览图片
                        // 转 blob 流上传 convertBase64UrlToBlob函数为 imgzip 的静态函数
                        cameraBlob = imgzip.convertBase64UrlToBlob(base64);
                        cameraFiles = new File([cameraBlob], item.name, { type: 'image/jpeg', lastModified: item.lastModified })

                        // console.log('cameraFiles---', cameraFiles)
                        cameraBlobList[index] = cameraFiles
                        // console.log('blobList---', cameraBlobList)
                    });

                })
                this.feituBlobsInDirectory = cameraBlobList
                // console.log('this.feituImageInfo=====', this.feituImageInfo)
                // console.log('this.feituBlobsInDirectory=====', this.feituBlobsInDirectory)
            }

        },

        // 霏图替换照片
        async replaceFeituImg(index) {
            // 打开一个文件。
            const feituBlob = await fileOpen({
                mimeTypes: ['image/*'],
                extensions: ['.ydu'],
            });
           // console.log('feituBlob---', feituBlob);

            // const reader = new FileReader();
            // reader.readAsDataURL(feituBlob);
            // reader.onload = () => {
            //   this.feituImageInfo[index].faceUrl = reader.result
            // };
            // this.feituBlobsInDirectory[index] = feituBlob
            // console.log('feituImageInfo---', this.feituImageInfo)
            // console.log('feituBlobsInDirectory---', this.feituBlobsInDirectory)
            if (this.feituSettingForm.photoQuality) {

            } else {
                this.feituSettingForm.photoQuality = 0.5
            }
           // console.log('this.feituSettingForm.photoQuality', this.feituSettingForm.photoQuality)
            if (this.feituSettingForm.photoQuality == 1) {
                const reader = new FileReader();
                reader.readAsDataURL(feituBlob);
                reader.onload = () => {
                    this.feituImageInfo[index].faceUrl = reader.result
                };
                this.feituBlobsInDirectory[index] = feituBlob
            } else {
                let compress = new imgzip({ quality: this.feituSettingForm.photoQuality });
                let blob = ''
                let files = ''
                let _this = this
                compress.photoCompress(feituBlob, function (base64) {
                    _this.feituImageInfo[index].faceUrl = base64
                    // 转 blob 流上传 convertBase64UrlToBlob函数为 imgzip 的静态函数
                    blob = imgzip.convertBase64UrlToBlob(base64);
                    files = new File([blob], feituBlob.name, { type: 'image/jpeg', lastModified: feituBlob.lastModified })
                    _this.feituBlobsInDirectory[index] = files
                    // console.log('feituImageInfo---', _this.feituImageInfo)
                    // console.log('feituBlobsInDirectory---', _this.feituBlobsInDirectory)
                });
            }

        },
        deleteFeituImg(index) {
            if (this.feituImageInfo[index].faceUrl == '') {
                return
            }
            // console.log(index,this.VisiaImageInfo)
            // this.VisiaImageInfo[index].faceUrl='';
            this.$confirm('此操作将删除该照片, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.feituImageInfo[index].faceUrl = '';
                    this.feituBlobsInDirectory[index] = '';
                    // console.log('deleteFeituImg', this.feituImageInfo)
                    // console.log('deleteFeituImg--', this.feituBlobsInDirectory)
                })
                .then(() => {
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },


        // 打开照相机设置
        openCameraSetting() {
            this.cameraSettingVisible = true
            this.cameraSettingFormCopy = JSON.parse(localStorage.getItem('cameraSetting')) || JSON.parse(JSON.stringify(this.cameraSettingForm));
        },
        // 照相机设备设置
        cameraNumberChange(currentValue, oldValue) {
            var addCameraNum = Math.abs(currentValue - oldValue)
           // console.log(addCameraNum, typeof (addCameraNum))
            if (currentValue > oldValue) {
                for (var a = 0; a < addCameraNum; a++) {
                    this.cameraSettingFormCopy.photoSetting.push({ faceLight: '1', facePart: '' })
                }
            } else {
                for (var b = 0; b < addCameraNum; b++) {
                    this.cameraSettingFormCopy.photoSetting.pop()
                }
            }
        },
        //照相机设置确定
        confirmCameraSetting() {
            if (!this.cameraSettingFormCopy.photoQuality) {
                this.$confirm('请输入照片压缩质量!', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then((content) => {
                        return
                    })
                    .catch((error) => {
                        return
                    })
            } else {
                this.cameraSettingFormCopy.photoSetting.forEach(item => {
                    item.faceUrl = ''
                })
                localStorage.setItem('cameraSetting', JSON.stringify(this.cameraSettingFormCopy));
                this.cameraSettingForm = JSON.parse(JSON.stringify(this.cameraSettingFormCopy))
                this.cameraImageInfo = this.cameraSettingForm.photoSetting
                this.cameraBlobsInDirectory = []
                this.cameraSettingVisible = false
            }
        },
        //照相机设置取消
        cancelCameraSetting() {
            this.cameraSettingVisible = false
        },
        //获取照相机授权
        async checkCameraBrowser() {
            // 打开多个文件。
            this.cameraBlobsInDirectory = await fileOpen({
                mimeTypes: ['image/*'],
                extensions: ['.ydu'],
                multiple: true,
            });

            //2.读取文件，成功img标签可以直接使用的格式
            //FileReader类就是专门用来读文件的
            //3.readAsDataURL: dataurl它的本质就是图片的二进制数据， 进行base64加密后形成的一个字符串， 这个字符串可以直接作用img标签的图片资源使用

            this.cameraImageInfo.forEach(item => {
                item.faceUrl = ''
                item.isLoading=true
            })

            // this.cameraBlobsInDirectory = this.cameraBlobsInDirectory.filter((item, index) => {
            //   return index < this.cameraImageInfo.length
            // })

            // var cameraNum = Math.abs(this.cameraImageInfo.length - this.cameraBlobsInDirectory.length)
            // if (this.cameraImageInfo.length < this.cameraBlobsInDirectory.length) {
            //     for (var a = 0; a < cameraNum; a++) {
            //         this.cameraImageInfo.push({ faceLight: '1', facePart: '', faceUrl: '' })
            //     }
            // } else {
            //     for (var b = 0; b < cameraNum; b++) {
            //         this.cameraImageInfo.pop()
            //     }
            // }
            // 获取照相机设置
            let cameraSettingFormCompare = JSON.parse(localStorage.getItem('cameraSetting')) || this.cameraSettingForm
            let cameraImageInfoCompare = cameraSettingFormCompare.photoSetting
            var cameraNum = Math.abs(this.cameraImageInfo.length - this.cameraBlobsInDirectory.length)
            if (this.cameraImageInfo.length < this.cameraBlobsInDirectory.length && this.cameraImageInfo.length > 5) {
                for (var a = 0; a < cameraNum; a++) {
                    this.cameraImageInfo.push({ faceLight: '1', facePart: '', faceUrl: '' })
                }
            } else if (this.cameraImageInfo.length < this.cameraBlobsInDirectory.length) {
                let initLength = this.cameraImageInfo.length
                for (var a = 0; a < cameraNum; a++) {
                    if (cameraImageInfoCompare[initLength + a]) {
                        this.cameraImageInfo.push({ faceLight: '1', facePart: cameraImageInfoCompare[initLength + a].facePart, faceUrl: '' })
                    } else {
                        this.cameraImageInfo.push({ faceLight: '1', facePart: '', faceUrl: '' })
                    }
                }
            } else {
                for (var b = 0; b < cameraNum; b++) {
                    this.cameraImageInfo.pop()
                }
            }

            // this.cameraBlobsInDirectory.forEach((item, index) => {
            //   const reader = new FileReader();
            //   reader.readAsDataURL(item)
            //   reader.onload = () => {
            //     this.cameraImageInfo[index].faceUrl = reader.result
            //   };
            // })

            if (this.cameraSettingForm.photoQuality) {

            } else {
                this.cameraSettingForm.photoQuality = 0.5
            }
          //  console.log('this.cameraSettingForm.photoQuality', this.cameraSettingForm.photoQuality)
            if (this.cameraSettingForm.photoQuality == 1) {
                this.cameraBlobsInDirectory.forEach((item, index) => {
                    const reader = new FileReader();
                    reader.readAsDataURL(item)
                    reader.onload = () => {
                        this.cameraImageInfo[index].faceUrl = reader.result
                    };
                })
            } else {
                let compress = new imgzip({ quality: this.cameraSettingForm.photoQuality });
                let cameraBlob = ''
                let cameraFiles = ''
                let cameraBlobList = []
                let _this = this
                this.cameraBlobsInDirectory.forEach((item, index) => {
                    // console.log('item---', item)
                    compress.photoCompress(item, function (base64) {
                        _this.cameraImageInfo[index].faceUrl = base64    //预览图片
                        // 转 blob 流上传 convertBase64UrlToBlob函数为 imgzip 的静态函数
                        cameraBlob = imgzip.convertBase64UrlToBlob(base64);
                        cameraFiles = new File([cameraBlob], item.name, { type: 'image/jpeg', lastModified: item.lastModified })

                        // console.log('cameraFiles---', cameraFiles)
                        cameraBlobList[index] = cameraFiles
                        // console.log('blobList---', cameraBlobList)
                    });

                })
                this.cameraBlobsInDirectory = cameraBlobList
               // console.log('this.cameraImageInfo=====', this.cameraImageInfo)
            }


        },
        // 照相机替换照片
        async replaceCameraImg(index) {
            // 打开一个文件。
            const blobSignalCamera = await fileOpen({
                mimeTypes: ['image/*'],
                extensions: ['.ydu'],
            });
          //  console.log('blobSignalCamera---', blobSignalCamera);

            // const reader = new FileReader();
            // reader.readAsDataURL(blobSignalCamera);
            // reader.onload = () => {
            //   this.cameraImageInfo[index].faceUrl = reader.result
            // };
            // this.blobsInDirectory[index] = blobSignalCamera
            if (this.cameraSettingForm.photoQuality) {

            } else {
                this.cameraSettingForm.photoQuality = 0.5
            }
           // console.log('this.cameraSettingForm.photoQuality', this.cameraSettingForm.photoQuality)
            if (this.cameraSettingForm.photoQuality == 1) {
                const reader = new FileReader();
                reader.readAsDataURL(blobSignalCamera);
                reader.onload = () => {
                    this.cameraImageInfo[index].faceUrl = reader.result
                };
                this.cameraBlobsInDirectory[index] = blobSignalCamera
                // console.log('this.cameraBlobsInDirectory+++++++++',this.cameraBlobsInDirectory)
            } else {
                let compress = new imgzip({ quality: this.cameraSettingForm.photoQuality });
                let cameraBlob = ''
                let cameraFiles = ''
                let _this = this
                compress.photoCompress(blobSignalCamera, function (base64) {
                    _this.cameraImageInfo[index].faceUrl = base64
                    // 转 blob 流上传 convertBase64UrlToBlob函数为 imgzip 的静态函数
                    cameraBlob = imgzip.convertBase64UrlToBlob(base64);
                    cameraFiles = new File([cameraBlob], blobSignalCamera.name, { type: 'image/jpeg', lastModified: blobSignalCamera.lastModified })
                    _this.cameraBlobsInDirectory[index] = cameraFiles
                    // console.log('cameraImageInfo---', _this.cameraImageInfo)
                    // console.log('cameraBlobsInDirectory---', _this.cameraBlobsInDirectory)
                });
            }

        },
        // 照相机删除照片
        deleteCameraImg(index) {
            if (this.cameraImageInfo[index].faceUrl == '') {
                return
            }
            // console.log(index,this.VisiaImageInfo)
            // this.VisiaImageInfo[index].faceUrl='';
            this.$confirm('此操作将删除该照片, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.cameraImageInfo[index].faceUrl = '';
                    this.cameraImageInfo[index].isLoading = false;
                    this.cameraBlobsInDirectory[index] = '';
                    // console.log('deleteImg', this.cameraImageInfo)
                    // console.log('deleteImg--', this.cameraBlobsInDirectory)
                })
                .then(() => {
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },





        // 打开VISIA设备设置
        openPhotoSetting() {
            this.photoSettingVisible = true
            this.photoSettingFormCopy = JSON.parse(localStorage.getItem('visiaSetting')) || JSON.parse(JSON.stringify(this.photoSettingForm));
        },
        // VISIA设备设置
        photoNumberChange(currentValue, oldValue) {
            var addNum = Math.abs(currentValue - oldValue)
          //  console.log(addNum, typeof (addNum))
            if (currentValue > oldValue) {
                for (var a = 0; a < addNum; a++) {
                    this.photoSettingFormCopy.photoSetting.push({ faceLight: '', facePart: '' })
                }
            } else {
                for (var b = 0; b < addNum; b++) {
                    this.photoSettingFormCopy.photoSetting.pop()
                }
            }

        },
        //visia设置确定
        confirmSetting() {
            if (!this.photoSettingFormCopy.photoQuality) {
                this.$confirm('请输入照片压缩质量!', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then((content) => {
                        return
                    })
                    .catch((error) => {
                        return
                    })
            } else {
                this.photoSettingFormCopy.photoSetting.forEach(item => {
                    item.faceUrl = ''
                })
                localStorage.setItem('visiaSetting', JSON.stringify(this.photoSettingFormCopy));
                this.photoSettingForm = JSON.parse(JSON.stringify(this.photoSettingFormCopy))
                this.VisiaImageInfo = this.photoSettingForm.photoSetting
                this.blobsInDirectory = []
                this.photoSettingVisible = false
            }
        },
        //visia设置取消
        cancelSetting() {
            this.photoSettingVisible = false
        },
        // Visia替换照片
        async replaceImg(index) {
            // 打开一个文件。
            const blobSignal = await fileOpen({
                mimeTypes: ['image/*'],
                extensions: ['.ydu'],
            });
           // console.log('blobSignal---', blobSignal);

            // const reader = new FileReader();
            // reader.readAsDataURL(blobSignal);
            // reader.onload = () => {
            //   this.VisiaImageInfo[index].faceUrl = reader.result
            // };
            // this.blobsInDirectory[index] = blobSignal
            if (this.photoSettingForm.photoQuality) {

            } else {
                this.photoSettingForm.photoQuality = 0.5
            }
          //  console.log('this.photoSettingForm.photoQuality', this.photoSettingForm.photoQuality)
            if (this.photoSettingForm.photoQuality == 1) {
                const reader = new FileReader();
                reader.readAsDataURL(blobSignal);
                reader.onload = () => {
                    this.VisiaImageInfo[index].faceUrl = reader.result
                };
                this.blobsInDirectory[index] = blobSignal
            } else {
                let compress = new imgzip({ quality: this.photoSettingForm.photoQuality });
                let blob = ''
                let files = ''
                let _this = this
                compress.photoCompress(blobSignal, function (base64) {
                    _this.VisiaImageInfo[index].faceUrl = base64
                    // 转 blob 流上传 convertBase64UrlToBlob函数为 imgzip 的静态函数
                    blob = imgzip.convertBase64UrlToBlob(base64);
                    files = new File([blob], blobSignal.name, { type: 'image/jpeg', lastModified: blobSignal.lastModified })
                    _this.blobsInDirectory[index] = files
                    // console.log('VisiaImageInfo---', _this.VisiaImageInfo)
                    // console.log('blobsInDirectory---', _this.blobsInDirectory)
                });
            }

        },
        // Visia删除照片
        deleteImg(index) {
            if (this.VisiaImageInfo[index].faceUrl == '') {
                return
            }
            // console.log(index,this.VisiaImageInfo)
            // this.VisiaImageInfo[index].faceUrl='';
            this.$confirm('此操作将删除该照片, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.VisiaImageInfo[index].faceUrl = '';
                    this.VisiaImageInfo[index].isLoading=false;
                    this.blobsInDirectory[index] = '';
                    // console.log('deleteImg', this.VisiaImageInfo)
                    // console.log('deleteImg--', this.blobsInDirectory)
                })
                .then(() => {
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        // Visia获取照片
        async checkBrowser() {
            // if (supported) {
            //     console.log('Using the File System Access API.');
            // } else {
            //     console.log('Using the fallback implementation.');
            // }
            // var photoPath=this.photoSettingForm.photoPath.replace(/\\/g,'/')+'/*'
            // console.log('photoPath',photoPath)
            // 打开一个文件。
            // const blob = await fileOpen({
            //   mimeTypes: ['image/*'],
            // });
            //
            // console.log('blob---',blob);
            //
            // const reader = new FileReader();
            // reader.readAsDataURL(blob);
            // reader.onload = () => {
            //   this.VisiaImageInfo.push({url:reader.result})
            // };
            //
            // console.log('reader---',reader)
            // console.log('VisiaImageInfo---',this.VisiaImageInfo)

            // // 打开多个文件。
            // const blobs = await fileOpen({
            //   mimeTypes: ['image/*'],
            //   multiple: true,
            // });
            //
            // console.log('blobs---',blobs);


            // // 打开不同MIME类型的文件。
            // const blobs02 = await fileOpen([
            //   {
            //     description: 'Image files',
            //     mimeTypes: ['image/jpg', 'image/png', 'image/gif', 'image/webp'],
            //     extensions: ['.jpg', '.jpeg', '.png', '.gif', '.webp'],
            //     multiple: true,
            //   },
            //   {
            //     description: 'Text files',
            //     mimeTypes: ['text/*'],
            //     extensions: ['.txt'],
            //   },
            // ]);

            // console.log('blobs02---',blobs02);

            // 打开目录中的所有文件，
            // 递归地包括子目录。
            //1. 拿到里面的文件, 这个file是一个file对象， file对象不能直接展示的
            // this.blobsInDirectory = await directoryOpen({
            //   recursive: true
            // });
            // 打开多个文件。
            this.blobsInDirectory = await fileOpen({
                mimeTypes: ['image/*'],
                extensions: ['.ydu'],
                multiple: true,
            });

            //2.读取文件，成功img标签可以直接使用的格式
            //FileReader类就是专门用来读文件的
            //3.readAsDataURL: dataurl它的本质就是图片的二进制数据， 进行base64加密后形成的一个字符串， 这个字符串可以直接作用img标签的图片资源使用

            this.VisiaImageInfo.forEach(item => {
                item.faceUrl = '',
                item.isLoading=true
            })

            this.blobsInDirectory = this.blobsInDirectory.filter((item, index) => {
                return index < this.VisiaImageInfo.length
            })
            // this.blobsInDirectory.forEach((item, index) => {
            //   const reader = new FileReader();
            //   reader.readAsDataURL(item)
            //   reader.onload = () => {
            //     this.VisiaImageInfo[index].faceUrl = reader.result
            //   };
            // })

            if (this.photoSettingForm.photoQuality) {

            } else {
                this.photoSettingForm.photoQuality = 0.5
            }
           // console.log('this.photoSettingForm.photoQuality', this.photoSettingForm.photoQuality)
            if (this.photoSettingForm.photoQuality == 1) {
                this.blobsInDirectory.forEach((item, index) => {
                    const reader = new FileReader();
                    reader.readAsDataURL(item)
                    reader.onload = () => {
                        this.VisiaImageInfo[index].faceUrl = reader.result
                    };
                })
            } else {
                let compress = new imgzip({ quality: this.photoSettingForm.photoQuality });
                let blob = ''
                let files = ''
                let blobList = []
                let _this = this
                this.blobsInDirectory.forEach((item, index) => {
                    compress.photoCompress(item, function (base64) {
                        _this.VisiaImageInfo[index].faceUrl = base64    //预览图片
                        // 转 blob 流上传 convertBase64UrlToBlob函数为 imgzip 的静态函数
                        blob = imgzip.convertBase64UrlToBlob(base64);
                        files = new File([blob], item.name, { type: 'image/jpeg', lastModified: item.lastModified })
                        // console.log('blob---',blob)
                        // console.log('files---', files)
                        blobList[index] = files
                        // console.log('blobList---', blobList)
                    });

                })
                this.blobsInDirectory = blobList
                // console.log('this.VisiaImageInfo=====', this.VisiaImageInfo)
            }


        },
        goNewPage() {
            this.electronUrl = `electron-vue-camera://startapp?token=${this.token}&&visitNum=${this.patientItem.visitNum}`
            window.open(this.electronUrl)
        }



    },

    created() {
        // 获取拍照设备
        this.photoDevice = localStorage.getItem('photoDevice') || '0'
        // 获取补光灯是否开启
        this.fillLightDefault = localStorage.getItem('fillLightDefault')

        // 获取霏图光照类型
        this.feituSettingForm = JSON.parse(localStorage.getItem('feituSetting')) || this.feituSettingForm
        this.feituImageInfo = this.feituSettingForm.photoSetting
        // console.log('this.feituSettingForm',this.feituSettingForm)

        // 获取visia设置
        this.photoSettingForm = JSON.parse(localStorage.getItem('visiaSetting')) || this.photoSettingForm
        this.VisiaImageInfo = this.photoSettingForm.photoSetting
        // console.log('this.photoSettingForm',this.photoSettingForm)

        // 获取照相机设置
        this.cameraSettingForm = JSON.parse(localStorage.getItem('cameraSetting')) || this.cameraSettingForm
        this.cameraImageInfo = this.cameraSettingForm.photoSetting
        // console.log('this.cameraSettingForm',this.cameraSettingForm)

        this.loading = false
    }



}

</script>
<style scoped rel="stylesheet/scss"  lang="scss">
.app-container {
    padding: 0px !important;
}

.photoRegisterDailog {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;

    .photoRegisterDailog_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

    }
}

.formBox {
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
    border-radius: 4px 4px 4px 4px;
    padding: 20px;
    margin-bottom: 10px;
}

.formBox .el-form-item {
    margin-bottom: 10px;
}

.progressBox {
    width: 60%;
    z-index: 999999;
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);

    //box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
    //background: #fff;
    //border-radius: 10px;
    //padding: 20px ;
    .lineTitle {
        text-align: center;
        font-size: 20px;
        color: #46A6FF;
    }

    .lineBox {
        display: flex;
        align-items: center;
        margin-top: 6px;

        .indexBox {
            width: 26px;
            color: #1890ff;
        }

        .el-progress {
            width: 100%;

        }
    }
}


.contentBox {
    display: flex;
    justify-content: space-between;
    /*align-items: center;*/
    padding-bottom: 10px;
}

.contentBox .contentBoxRight {
    display: flex;
    align-items: center;
}

.contentBox .contentBoxLeft {
    display: flex;
    align-items: center;
}

.contentBox .line {
    display: inline-block;
    width: 6px;
    height: 23px;
    background: #5972FF;
    border-radius: 10px;
    margin-right: 12px;
}

.contentBox .name {
    font-size: 18px;

}

.patientBox {
    .itemBox {
        display: flex;
        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
        border-radius: 4px 4px 4px 4px;
        padding: 20px;

        .itemInfoBox {
            display: flex;

        }
    }
}

.user-info-head {
    position: relative;
    display: block;
    width: 200px;
    height: 317px;
    border: 1px solid #000;
    box-sizing: border-box;
    margin:0 auto;

    .rightNum {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        color: red;
        font-weight: bold;
        opacity: 1;
    }

    .rightIcon {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        color: red;
        font-weight: bold;
        opacity: 0;
    }

    .leftEnlarge {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        color: red;
        opacity: 0;
    }

    .img-style {
        width: 100%;
        height: 100%;
        display: block;

        ::v-deep .el-image__error {
            opacity: 0;
        }
    }

    .img-styleCamera {
        position: relative;
        top: 50%;
        transform: translateY(-50%);

        ::v-deep .el-image__error {
            opacity: 0;
        }
    }

    //image图片路径错误时，不显示破图/图片裂开，
    //.img-style[src=""],
    //.img-style:not([src]) {
    //  opacity: 0;
    //}
    &:hover {
        .rightNum {
            opacity: 0;
        }

        .rightIcon {
            opacity: 1;
        }

        .leftEnlarge {
            opacity: 1;
        }

    }
}


::v-deep .labelBox {
    label {
        position: relative;
    }

    #fileinp {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

    #btn {
        padding: 5px 10px;
        background: #f3a4a1;
        color: #FFF;
        border: none;
        border-radius: 5px;
        margin-right: 5px;
    }

}

::v-deep .el-input.is-disabled .el-input__inner {
    color: #606266;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
    color: #606266;
}

//::v-deep .el-loading-spinner {
//    /*这个是自己想设置的 gif 加载动图*/
//    background-image: url('../../../assets/images/loading.gif');
//    background-repeat: no-repeat;
//    /*background-size: 200px 120px;*/
//    background-size: 200px 150px;
//    height: 150px;
//    width: 100%;
//    background-position: center;
//    /*覆盖 element-ui  默认的 50%    因为此处设置了height:100%,所以不设置的话，会只显示一半，因为被top顶下去了*/
//    top: 10%;
//}
::v-deep .el-loading-spinner {
    display: none;
}

::v-deep .el-loading-spinner .circular {
    /*隐藏 之前  element-ui  默认的 loading 动画*/
    display: none;
}

::v-deep .el-loading-spinner .el-loading-text {
    /*为了使得文字在loading图下面*/
    margin: 100px 0px;
    //font-size: 20px;
}

::v-deep .el-dialog {
    margin-top: 0 !important;
}

::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 0 !important;
}

.main-container-content {
    width: 1200px;
    font-size: 16px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.photoImageContent {
    .user-info-head {
        position: relative;
        display: block;
        width: 200px;
        height: 317px;
        border: 1px solid #000;
        box-sizing: border-box;
        margin:0 auto;

        .rightNum {
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            color: red;
            font-weight: bold;
            opacity: 1;
        }

        .rightIcon {
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            color: red;
            font-weight: bold;
            opacity: 0;
        }

        .leftEnlarge {
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            color: red;
            opacity: 0;
        }

        .img-style {
            width: 100%;
            height: 100%;
            display: block;

            .el-image__error {
                opacity: 0;
            }
        }

        .img-styleCamera {
            position: relative;
            top: 50%;
            transform: translateY(-50%);

            .el-image__error {
                opacity: 0;
            }
        }

        &:hover {
            .rightNum {
                opacity: 0;
            }

            .rightIcon {
                opacity: 1;
            }

            .leftEnlarge {
                opacity: 1;
            }

        }
    }

    &_formBox {
        margin: 0 auto;
        margin-top: 10px;
        width: 200px;

        &_infos {
            height: 100px;
        }
    }

    &_input {
        width: 100%
    }

}

.idNumInput {
    width: 202px;
    margin-right: 10px;

    &_code {
        width: 150px;
    }
}

::v-deep .noLabelItem .el-form-item__content {
    margin-left: 0px !important;
}

@media screen and (min-width: 1200px) {

    .main-container-content {
        width: 1200px;
        font-size: 16px;
    }


    ::v-deep .el-col-lg-4-8 {
        width: 20%;
    }
}

@media screen and (min-width: 993px) and (max-width:1199px) {

    .main-container-content {
        width: 993px;
        font-size: 16px;
    }

    .idNumInput {
        width: 170px;
        margin-right: 10px;
    }

    .idNumInput0 {
        width: 290px;
    }

    .sexInput {
        width: 112px;
    }

}

@media screen and (min-width: 768px) and (max-width:992px) {


    .main-container-content {
        width: 768px;
        padding: 10px !important;
        font-size: 14px;
    }





    // 图片上传组件 start
    .photoImageContent {
        &_formBox {
            //3张
            width: 150px;
            margin-top: 8px;
        }

        .user-info-head {
            //3张
            width: 150px;
            height: 237px;
        }
    }



}

@media screen and (min-width: 550px) and (max-width:767px) {


    .main-container-content {
        width: 100%;
        padding: 10px !important;
        font-size: 14px;
    }

    .photoImageContent {
        &_formBox {
            //3张
            width: 150px;
            margin-top: 8px;
        }

        &_input {
            width: 100%
        }

        .user-info-head {
            //3张
            width: 150px;
            height: 237px;
        }
    }

    // 图片上传组件 end




}

@media screen and (max-width:550px) {

    .sexInput {
        width: 90px; //78
    }

    .idNumInput {
        width: 180px;
        margin-right: 6px;
    }

    .idNumInput0 {
        width: 276px;
    }

    .main-container-content {
        width: 100%;
        padding: 10px !important;
        box-sizing: border-box;
        font-size: 12px;
    }

    // 图片上传组件 start
    .photoImageContent {
        &_formBox {
            margin-top: 6px;
            width: 90px;

            &_infos {
                font-size: 12px;
            }
        }

        .user-info-head {
            //3张
            width: 90px;
            height: 142px;
        }
    }

    // 图片上传组件 end

}

@media screen and (max-width:390px) {

    .sexInput {
        width: 80px; //78
    }

    .idNumInput {
        width: 150px;
        margin-right: 3px;
    }

    .idNumInput0 {
        width: 230px;
    }

    // 图片上传组件 start
    .photoImageContent {
        &_formBox {
            margin-top: 6px;
            width: 90px;

            &_infos {
                font-size: 12px;
                height: 140px;
            }
        }

        .user-info-head {
            //3张
            width: 90px;
            height: 142px;
        }
    }
}</style>

